<template>
  <div class="OCStudioList pd-20">
    <el-input v-model="nickName"
              placeholder="请输入责任医生"
              clearable
              class="w-200"
              @clear="searchMethod" />
    <el-button type="primary"
               @click="searchMethod">查 询</el-button>
    <el-table border
              stripe
              ref="multipleTable"
              :data="dataList"
              height="780"
              style="width: 100%"
              class="mt-20">
      <el-table-column type="index"
                       align="center"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column align="center"
                       label="头像"
                       width="100">
        <template slot-scope="scope">
          <el-avatar :size="50">
            <el-image :src="scope.row.imgUrl"
                      :preview-src-list="[scope.row.imgUrl]">
            </el-image>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       align="center"
                       label="团队名称"
                       width="260">
      </el-table-column>
      <el-table-column prop="typeName"
                       align="center"
                       label="团队类别"
                       width="150">
      </el-table-column>
      <el-table-column align="center"
                       label="团队标签"
                       width="300">
        <template slot-scope="scope">
          <div class="tag-group">
            <el-tag v-for="item in scope.row.ocStudioLableDtos"
                    :key="item.name"
                    :type="tagType"
                    effect="dark">
              {{ item.name }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="责任医生"
                       width="100">
        <template slot-scope="scope">
          <span>{{scope.row.doctorDto.nickName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="医院">
        <template slot-scope="scope">
          <span>{{scope.row.doctorDto.hospitalDto.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="二维码"
                       width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.qrCodeUrl"
                    :preview-src-list="[scope.row.qrCodeUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="创建时间"
                       width="150"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column width="100"
                       label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="info"
                     @click="showDetailPage(scope.row)">详 细</el-button>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="initTableData"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <el-dialog title="团队详情"
               width="60%"
               :visible.sync="dialogVisible">
      <el-form :label-position="labelPosition"
               label-width="70px"
               :model="studioDetail">
        <el-form-item label="头像">
          <el-avatar shape="square"
                     :size="50">
            <el-image :src="studioDetail.imgUrl"
                      :preview-src-list="[studioDetail.imgUrl]">
            </el-image>
          </el-avatar>
        </el-form-item>
        <el-form-item label="团队名称">
          <el-input v-model="studioDetail.name"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="团队类别">
          <el-input v-model="studioDetail.typeName"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="责任医生">
          <el-input v-model="studioDetail.doctorDto.nickName"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="医院">
          <el-input v-model="studioDetail.doctorDto.hospitalName"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="二维码">
          <el-avatar shape="square"
                     :size="50">
            <el-image :src="studioDetail.qrCodeUrl"
                      :preview-src-list="[studioDetail.qrCodeUrl]">
            </el-image>
          </el-avatar>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input type="textarea"
                    :rows="2"
                    v-model="studioDetail.introduce"
                    :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="doctorDetail"
                style="width: 100%"
                border>
        <el-table-column align="center"
                         label="团队医生列表">
          <el-table-column type="index"
                           label="序号"
                           width="50">
          </el-table-column>
          <el-table-column align="center"
                           label="头像"
                           min-width="30">
            <template slot-scope="scope">
              <el-avatar :size="50">
                <el-image :src="scope.row.doctorDto.headImageUrl"
                          :preview-src-list="[scope.row.doctorDto.headImageUrl]">
                </el-image>
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="医生名称"
                           width="100">
            <template slot-scope="scope">
              <span>{{scope.row.doctorDto.nickName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="医院"
                           width="100">
            <template slot-scope="scope">
              <span>{{scope.row.doctorDto.hospitalName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="科室"
                           width="100">
            <template slot-scope="scope">
              <span>{{scope.row.doctorDto.departmentName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="职称"
                           width="100">
            <template slot-scope="scope">
              <span>{{scope.row.doctorDto.positionName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="是否通过"
                           width="100"
                           :formatter="formatterApplyFlag">
          </el-table-column>
          <el-table-column prop="applyContent"
                           align="center"
                           label="申请类容"
                           min-width="150">
          </el-table-column>
          <el-table-column align="center"
                           label="创建时间"
                           min-width="100"
                           :formatter="formatterDate">
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "OCStudioList",
    data () {
      return {
        tagType: 'success',
        nickName: '',
        pageIndex: 0,
        pageSize: 10,
        dataList: [],
        infiniteId: 0,
        state: '',
        dialogVisible: false,
        studioDetail: {
          imgUrl: null,
          name: null,
          typeName: null,
          doctorDto: {
            nickName: null,
            hospitalName: null
          },
          qrCodeUrl: null,
          introduce: null
        },
        labelPosition: 'right',
        doctorDetail: [],
        studioId: ''
      }
    },
    methods: {
      initTableData ($state) {
        this.state = $state;
        let param = {
          nickName: this.nickName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.ocStudioList.url, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex += 1;
              this.dataList = this.dataList.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchMethod () {
        if (this.nickName === '') {
          this.pageIndex = 0;
          this.dataList = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.dataList = [];
          this.initTableData(this.state)
        }
      },
      showDetailPage (row) {
        this.studioDetail = row;
        this.dialogVisible = true;
        let param = {
          studioId: row.id
        };
        this.post(this.api.ocStudioDoctorList.url, param).then(res => {
          if (res.data.code === '200') {
            this.doctorDetail = res.data.object
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        })
      },
      formatterApplyFlag (row) {
        let applyFlag = ["未通过", "通过", "待验证", "邀请,待验证"];
        return applyFlag[row.applyFlag]
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm')
      }
    }
  }
</script>

<style>
  .el-tag--dark.el-tag--success {
    margin: 0 2px;
  }
</style>
